<template>
    <div class="w-screen h-screen  sm:bg-sky-500 sm:pt-28">
            <KCard style="max-width: 400px;margin: auto;">            
                <svg t="1672642278918" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3160" width="200" height="200">
                    <path d="M352 458.2V678c0 9.4 7.6 17 17 17h73.1l3.2 1.5C466 706 488.6 711 512 711c23.4 0 46-5 66.7-14.5l3.2-1.5H655c9.4 0 17-7.6 17-17V460v-1.3-3.7c0-88.4-71.6-160-160-160s-160 71.6-160 160v3.2z m-32-3.2c0-106 86-192 192-192s192 86 192 192v223c0 27.1-21.9 49-49 49h-66.2c-24 10.5-50.1 16-76.8 16-26.8 0-52.8-5.5-76.8-16H369c-27.1 0-49-21.9-49-49V460v-1.7-3.3z m238.8-32.6
                    " fill="#5AC1FD" p-id="3162"></path>
                    <circle cx="440" cy="450"  r="30" fill="#5AC1FD"></circle>
                    <circle cx="584" cy="450"  r="30" fill="#5AC1FD"></circle>
                </svg>
                <!-- <h2>登录</h2> -->
                <KForm @ksubmit="Submit" style="max-width: 375px;" :model="LoginForm" :rules="rules">
                    <KFormItem n="email">
                        <KInput title="忘记密码" v-model="LoginForm.email"/>
                    </KFormItem>
                    <KFormItem n="code" v-if="confirmRegister">
                        <KInput title="验证码" v-model="LoginForm.code"/>
                    </KFormItem>
                    <KFormItem n="password" v-if="confirmRegister">
                        <KInput title="密码" v-model="LoginForm.password" type="password"/>
                    </KFormItem>
                    <KFormItem n="passwordR" v-if="confirmRegister">
                        <KInput title="重复密码" v-model="LoginForm.passwordR" type="password"/>
                    </KFormItem>
                    <div class="tip-box">
                        <span class="route-push" @click="router.push(login)">想起来了，前往登录</span>
                        <span class="route-push" @click="router.push(register)">没有账号，前往注册</span>
                    </div>
                    <KFormItem class="my-5">
                        <button type="submit" class="container h-10 text-white font-extrabold bg-blue-600 hover:bg-blue-400">
                            {{ confirmRegister?"重置密码":"发送验证码" }}
                        </button>
                    </KFormItem>
                    <div class="tip-box" style="justify-content: center;">
                        <span class="route-push" @click="( confirmRegister=!confirmRegister )">{{ confirmRegister?"我没有收到验证码":"我已经收到验证码了" }}</span>
                    </div>
                </KForm>
            </KCard>
    </div>
</template>

<script setup>
import KForm from '@/components/KForm.vue';
import KInput from '@/components/KInput.vue';
import KFormItem from '@/components/KForm_item.vue';
import { reactive, ref } from 'vue';
import KCard from '@/components/KCard.vue';
import { useRouter } from 'vue-router';
import { msgSuccess } from '@/method/quickUse';
import { FchangedPwd,forgetPwd } from '@/http/login';
const router = useRouter()
const register = "/register"
const login ="/login"

const LoginForm = reactive({
    email:"",
    code: "",
    password: "",
    passwordR:""
})

const confirmRegister = ref(false)
const EmailModel = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
const rules={
    email:(v)=>{
        if (v===""){
            return "请填写您的账号（注册时的邮箱）"
        }
        if (!EmailModel.test(v)){
            return "无效的邮箱地址"
        }
        else return ""
    },
    code:(v)=>{
        if (v===""){
            return "必须填写验证码"
        }
        else return ""
    },
    password:(v)=>{
        if (v===""){
            return "必须填写密码"
        }
        else return ""
    },
    passwordR:(v)=>{
        if (v===""){
            return "请确认您的密码"
        }
        if (v!==LoginForm.password){
            return "您前后输入的密码不一致"
        }
        else return ""
    }
}
function Submit(check) {
    if (check) {
        if (confirmRegister.value) {
            const {email,password,code} = LoginForm
            FchangedPwd({userEmail:email,password,code}).then(res=>{
                msgSuccess("修改成功，快去登录吧")
            }).catch(res=>{
                console.error(res)
            })
        }else {
            forgetPwd({email:LoginForm.email}).then(res=>{
                if (res.code===0) {
                    confirmRegister.value = true
                    msgSuccess("验证码码已发送，请及时重置密码")
                }
            })
        }
    }
}
</script>
<style>
:root {
    --ki-hover: #666;
    --ki-unhover: #aaa;
    --ki-select: #5d9bfc;
    --ki-pad: .9em;
}
</style>